<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:200, 300, 400, 600, 700">
    <link rel="stylesheet" href="hc-offcanvas-nav.css">

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js">
    </script>
    <script src="hc-offcanvas-nav.js">
    </script>
</head>

<body>
    <nav id="navID">
        <ul>
            <li data-nav-highlight>
                <a href="#">Home</a>
            </li>
            <li data-nav-active><a href="#">About Us</a>
                <ul data-nav-active>
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Services</a></li>
                </ul>
            </li>
            <li><a href="#">Contact</a></li>
            <li><a data-nav-close="false" href="#">
                    Add New Page
                </a></li>
            <li data-nav-custom-content>
                <p>Developers or designer's
                    own custom content.</p>
            </li>
        </ul>
    </nav>
    <script>
        (function ($) {
            var Nav;
            // initialize hc-offcanvas-nav()
            Nav = $('#navID').hcOffcanvasNav({
                levelTitles: true
            });

        })(jQuery);
    </script>
</body>

</html>